<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>MooEditable example with AJAX submit</title>

		<style type="text/css">
			body{
				font-family: sans-serif;
				font-size: .9em;
			}
			.mooeditable{
				border: 2px solid #ddd;
			}
			#textarea-1{
				width: 700px;
				height: 200px;
				padding: 10px;
			}
		</style>

		<link rel="stylesheet" type="text/css" href="../css/MooEditable.css">
		<script type="text/javascript" src="../js/mootools-1.2.1-core-built.js"></script>
		<script type="text/javascript" src="../js/MooEditable.js"></script>

		<script type="text/javascript">
			window.addEvent('load', function(){
				mooeditable = $('textarea-1').mooEditable();

				// Post submit
				$('theForm').addEvent('submit', function(e){
					alert($('textarea-1').value);
					return true;
				});
			});

			// Ajax submit
			function updateContent(){
				mooeditable.saveContent();
			}
		</script>

	</head>
	<body>

		<h1>MooEditable example with AJAX submit</h1>

		<form id="theForm" method="post" action="http://xrado.hopto.org/post.php">

			<label for="textarea-1">Textarea 1</label>
			<textarea class="mooeditable" id="textarea-1" name="editable1">
			&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
			</textarea>

			<input type="submit">

			<input type="button" onclick="updateContent(); new Request.HTML({url:'http://xrado.hopto.org/post.php',data:$('theForm'),update:$('data')}).send()" value="Ajax submit">

		</form>

		<div id="data"></div>

	</body>
</html>
